describe('max-height', () => {
  it("should not work with display inline element", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '10px',
        display: 'inline',
      }
    }, [
      createText('This text should not be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display inline-block when it has no children and height not exist", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        width: '300px',
        maxHeight: '100px',
        display: 'inline-block',
      }
    });
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display block when it has no children and height not exist", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        width: '300px',
        maxHeight: '100px',
        display: 'block',
      }
    });
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display inline-flex when it has no children and height not exist", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        width: '300px',
        maxHeight: '100px',
        display: 'inline-flex',
      }
    });
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display flex when it has no children and height not exist", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        width: '300px',
        maxHeight: '100px',
        display: 'flex',
      }
    });
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display inline-block when child height is larger than max-height", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '10px',
        display: 'inline-block',
      }
    }, [
      createText('This text should not be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display inline-block when child height is smaller than max-height", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '50px',
        display: 'inline-block',
      }
    }, [
      createText('This text should not be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display inline-flex when child height is larger than max-height", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '10px',
        display: 'inline-flex',
      }
    }, [
      createText('This text should not be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display inline-flex when child height is smaller than max-height", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '50px',
        display: 'inline-block',
      }
    }, [
      createText('This text should not be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display block when child height is larger than max-height", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '10px',
        display: 'block',
      }
    }, [
      createText('This text should be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display block when child length is smaller than max-height", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '50px',
        display: 'block',
      }
    }, [
      createText('This text should not be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });


  it("should work with display flex when child height is larger than max-height", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '10px',
        display: 'flex',
      }
    }, [
      createText('This text should be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it("should work with display flex when child height is smaller than max-height", async () => {
    let containingBlock = createElement('div', {
      style: {
        border: '2px solid #000',
        maxHeight: '50px',
        display: 'flex',
      }
    }, [
      createText('This text should not be wrapped')
    ]);
    BODY.appendChild(containingBlock);

    await snapshot();
  });

  it('should work with replaced element when element height is smaller than intrinsic height', async () => {
    let flexbox;
    flexbox = createElement(
      'div',
      {
        style: {
          'background-color': '#999',
          height: '200px',
          width: '200px',
          'box-sizing': 'border-box',
        },
      },
      [
        createElement('img', {
          src: 'assets/100x100-green.png',
          style: {
            'background-color': 'green',
            maxHeight: '50px',
            'box-sizing': 'border-box',
          },
        },
        )
      ]
    );
    BODY.appendChild(flexbox);

    await snapshot(0.1);
  });

  it('should work with replaced element when element height is larger than intrinsic height', async () => {
    let flexbox;
    flexbox = createElement(
      'div',
      {
        style: {
          'background-color': '#999',
          height: '200px',
          width: '200px',
          'box-sizing': 'border-box',
        },
      },
      [
        createElement('img', {
          src: 'assets/100x100-green.png',
          style: {
            'background-color': 'green',
            maxHeight: '200px',
            'box-sizing': 'border-box',
          },
        },
        )
      ]
    );
    BODY.appendChild(flexbox);

    await snapshot(0.1);
  });

  it('should work with percentage in flow layout', async () => {
    let div;
    div = createElement(
      'div',
      {
        style: {
          width: '200px',
          height: '200px',
          backgroundColor: 'green',
          position: 'relative',
        },
      },
      [
        createElement('div', {
          style: {
            height: '200px',
            maxHeight: '50%',
            width: '50%',
            backgroundColor: 'yellow',
          }
        }),
        createElement('div', {
          style: {
            height: '200px',
            maxHeight: '50%',
            width: '50%',
            backgroundColor: 'blue',
          }
        },
        )
      ]
    );

    BODY.appendChild(div);
    await snapshot();
  });

  it('should work with percentage in flex layout in row direction', async () => {
    let div;
    div = createElement(
      'div',
      {
        style: {
          display: 'flex',
          width: '200px',
          height: '200px',
          backgroundColor: 'green',
          position: 'relative',
        },
      },
      [
        createElement('div', {
          style: {
            height: '200px',
            maxHeight: '50%',
            width: '50%',
            backgroundColor: 'yellow',
          }
        }),
        createElement('div', {
          style: {
            height: '200px',
            maxHeight: '50%',
            width: '50%',
            backgroundColor: 'blue',
          }
        },
        )
      ]
    );

    BODY.appendChild(div);
    await snapshot();
  });

  it('should work with percentage in flex layout in column direction', async () => {
    let div;
    div = createElement(
      'div',
      {
        style: {
          display: 'flex',
          flexDirection: 'column',
          width: '200px',
          height: '200px',
          backgroundColor: 'green',
          position: 'relative',
        },
      },
      [
        createElement('div', {
          style: {
            height: '200px',
            maxHeight: '50%',
            width: '50%',
            backgroundColor: 'yellow',
          }
        }),
        createElement('div', {
          style: {
            height: '200px',
            maxHeight: '50%',
            width: '50%',
            backgroundColor: 'blue',
          }
        },
        )
      ]
    );

    BODY.appendChild(div);
    await snapshot();
  });

  it('change from not none to none', async (done) => {
    const cont = createElement(
      'div',
      {
        style: {
          display: 'flex',
          height: '200px',
          maxHeight: '100px',
          width: '100px',
          backgroundColor: 'green',
          fontSize: '18px',
        }
      }
    );
    append(BODY, cont);

    await snapshot();

    requestAnimationFrame(async () => {
      cont.style.maxHeight = 'none';
      await snapshot();
      done();
    });
  });

  it('max-height exists and height does not exist in flow layout', async () => {
    const container = createElement('div', {
      style: {
        width: '100px',
        maxHeight: '200px',
        backgroundColor: 'lightblue'
      }
    }, [
      createText('max-height')
    ]);
    document.body.appendChild(container);
    await snapshot();
  });

  it('max-height is larger than height in flow layout', async () => {
    const container = createElement('div', {
      style: {
        width: '100px',
        height: '100px',
        maxHeight: '200px',
        backgroundColor: 'lightblue'
      }
    }, [
      createText('max-height')
    ]);
    document.body.appendChild(container);
    await snapshot();
  });

  it('max-height smaller than height in flow layout', async () => {
    const container = createElement('div', {
      style: {
        width: '100px',
        height: '100px',
        maxWidth: '50px',
        backgroundColor: 'lightblue'
      }
    }, [
      createText('max-height')
    ]);
    document.body.appendChild(container);
    await snapshot();
  });

  it('max-height exists and height does not exist in flex layout', async () => {
    const container = createElement('div', {
      style: {
        width: '100px',
        maxHeight: '200px',
        backgroundColor: 'lightblue'
      }
    }, [
      createText('max-height')
    ]);
    const root = createElement('div', {
      style: {
        display: 'flex',
      }
    });
    root.appendChild(container);
    document.body.appendChild(root);
    await snapshot();
  });

  it('max-height is larger than height in flex layout', async () => {
    const container = createElement('div', {
      style: {
        width: '100px',
        height: '100px',
        maxHeight: '200px',
        backgroundColor: 'lightblue'
      }
    }, [
      createText('max-height')
    ]);
    const root = createElement('div', {
      style: {
        display: 'flex',
      }
    });
    root.appendChild(container);
    document.body.appendChild(root);
    await snapshot();
  });

  it('max-height smaller than height in flex layout', async () => {
    const container = createElement('div', {
      style: {
        width: '100px',
        height: '100px',
        maxWidth: '50px',
        backgroundColor: 'lightblue'
      }
    }, [
      createText('max-height')
    ]);
    const root = createElement('div', {
      style: {
        display: 'flex',
      }
    });
    root.appendChild(container);
    document.body.appendChild(root);
    await snapshot();
  });

  it('set max-height on scroller box won\' have no effecrt', async () => {
    const container = createElement('div', {
      style: {
        maxHeight: '400px',
        overflow: 'scroll',
        backgroundColor: 'red'
      }
    }, [
      createText('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.')
    ]);
    BODY.appendChild(container);
    await snapshot();
  });

  it('set max-width on scroller box should works', async () => {
    const container = createElement('div', {
      style: {
        maxWidth: '100px',
        overflow: 'scroll',
        backgroundColor: 'red'
      }
    }, [
      createText('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.')
    ]);
    BODY.appendChild(container);
    await snapshot();
  })
});
